<template>
  <div class="auto">
    <form  class="form-horizontal">
      <p class="bg-info text-center" style="padding: 8px;">更改气价</p>
    <validator name='v'>
      <div class="form-group auto">
        <label for="usertype" class="col-sm-2 control-label">现用户类型:</label>
        <div class="col-sm-2">
          <v-select :value.sync="model.usertype" v-model="model.usertype"
              :options='usertypes' placeholder='用户类型'
              close-on-select></v-select>
        </div>

        <label for="gasproperties" class="col-sm-2 control-label">现用气性质:</label>
        <div class="col-sm-2">
          <v-select :value.sync="model.gasproperties" v-model="model.gasproperties"
              :options='gasproperties' placeholder='用气性质'
              close-on-select></v-select>
        </div>
      </div>
      <div class="form-group auto">
        <label for="pricetype" class="col-sm-2 control-label">现气价类型:</label>
        <div class="col-sm-2">
          <v-select :value.sync="model.pricetype" v-model="model.pricetype"
              :options='pricetypes' placeholder='气价类型'
              close-on-select></v-select>
        </div>

        <label for="pricename" class="col-sm-2 control-label">现气价名称:</label>
        <div class="col-sm-2">
              <!-- <input type="text" class="form-control" v-model="metermessage.pricename" placeholder='气价名称' > -->
            <v-select :value.sync="model.pricename" v-model="model.pricename"
                :options='getPricenames(model.pricetype)' placeholder='气价名称'
                close-on-select></v-select>
        </div>
      </div>
      <div class="form-group auto" style="margin-top:10px;">
          <label for="f_change_cause" class=" col-sm-2 control-label">修改原因:</label>
          <div class="col-sm-8">
            <textarea class="form-control"   v-validate:f_reason='{required: true }'
             v-model="model.f_reason" rows="3" placeholder="请填写原因"></textarea>
        </div>
      </div>
  </validator>
   </form>
   <div style="text-align:right;height:auto;margin-top:50px;margin-right:50px;">
     <button class="btn btn-success" @click="confirm()"  :disabled='!$v.valid'>确&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;认</button>
     <button class="btn btn-default" @click="clean()" style="width:80px;margin-left:20px;">取&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;消</button>
   </div>
  </div>
</template>
<script>
import AppData from '../../../../../stores/AppData'
import * as Util from '../../../../Util'

export default {
  title: '批量操作',
  data () {
    return {
      model: {
        usertype: ['请选择'],
        gasproperties: ['请选择'],
        pricetype: ['请选择'],
        pricename: ['请选择'],
        f_reason: ''
      }
    }
  },
  props: ['data'],
  methods: {
    clean () {
      this.$info('取消操作')
      this.$dispatch('clean', '批量操作')
    },
    getPricenames (pricetype) {
      let rs = []
      if (this.model.usertype.length === 1 && this.model.gasproperties.length === 1 && pricetype.length === 1) {
        rs = AppData.getPrice({f_user_type: this.model.usertype[0],
          f_gasproperties: this.model.gasproperties[0], f_price_type: pricetype[0]})
      }
      if (rs.length === 0) {
        this.model.pricename = ''
      }
      this.pricenames = rs
      return rs
    },
    confirm () {
      let data = {
        usertype: this.model.usertype[0],
        gasproperties: this.model.gasproperties[0],
        pricetype: this.model.pricetype[0],
        pricename: this.model.pricename[0],
        f_change_cause: this.model.f_reason,
        condition: this.data.condition,
        f_operator: Util.f.name,
        f_change_count: this.data.count,
        f_change_type: '气价变更',
        f_filiale: Util.f.f_fengongsi,
        f_outlets: Util.f.f_parentname
      }
      this.$LogicService.updateGasPrice(data)
      .then(
        (res) => {
          this.$dispatch('success', '批量变更气价', this.data, res)
        }
      ).catch(
        (error) => {
          this.$dispatch('error', '批量变更气价', this.data, error)
        }
      )
    }

  },
  computed: {
    usertypes () {
      return AppData.getParam('用户类型')
    },
    gasproperties () {
      return AppData.getParam('用气性质')
    },
    pricetypes () {
      return AppData.getParam('气价类型')
    }
  }
}
</script>
